<template>
  <div class="custom-page">
    <div class="search-wrap">
      <a-form-model ref="formRef">
        <div class="search-title">查询条件</div>
        <a-row>
          <a-col :span="6">
            <div style="margin-right: 12px">
              <a-form-model-item prop="orderNo"
                ><a-input v-model="queryParam.orderNo" placeholder="请输入单据编号" allowClear />
              </a-form-model-item>
            </div>
          </a-col>
          <a-col :span="6">
            <div style="margin-right: 12px">
              <a-form-model-item prop="state">
                <a-select
                  v-model="queryParam.state"
                  style="width: 100%; margin-top: 4px"
                  placeholder="请选择订单状态"
                  allowClear
                >
                  <a-select-option v-for="(item, index) in stateOptions" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </div>
          </a-col>
          <a-col :span="6">
            <div style="margin-right: 12px">
              <a-form-model-item prop="createBy"
                ><a-input v-model="queryParam.createBy" placeholder="请输入创建人" allowClear />
              </a-form-model-item>
            </div>
          </a-col>
          <a-col :span="6">
            <div style="margin-right: 12px">
              <a-form-model-item prop="createTime"
                ><a-date-picker
                  v-model="queryParam.createTime"
                  valueFormat="YYYY-MM-DD"
                  placeholder="请选择创建日期"
                  style="width: 100%"
                  allowClear
              /></a-form-model-item>
            </div>
          </a-col>
          <a-col :span="6">
            <div style="margin-right: 12px">
              <a-form-model-item prop="warehourse">
                <a-select
                  v-model="queryParam.warehourse"
                  style="width: 100%; margin-top: 4px"
                  placeholder="请选择所属仓库"
                  allowClear
                >
                  <a-select-option v-for="(item, index) in warehouseOptions" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </div>
          </a-col>
          <a-col :span="6" style="margin-top: 5px">
            <a-button style="margin-right: 20px" @click="searchQuery()" type="primary"> 查询 </a-button>
            <a-button style="margin-right: 20px" @click="addOrder()" type="primary"> 新增入库单 </a-button>
            <a-button style="margin-right: 20px" @click="searchReset()"> 重置 </a-button>
            <!-- <a-button style="margin-right: 20px" @click="downFile()"> 下载 </a-button> -->
          </a-col>
        </a-row>
      </a-form-model>

      <!-- <a-input-search
        v-model="queryParam.orderNo"
        placeholder="请输入单据编号查询"
        allowClear
        enter-button="查询"
        style="width: 400px"
        @search="searchQuery"
      />
      <a-button style="margin-left: 20px" @click="addOrder()" type="primary"> 新增入库单 </a-button> -->
    </div>
    <div class="table-wrap">
      <!-- :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <!-- 字符串超长截取省略号显示-->
        <!-- <span slot="esContent" slot-scope="text">
          <j-ellipsis :value="text" :length="10" />
        </span> -->
        <template slot="warehourse" slot-scope="text">
          {{ handleWarehourse(text) }}
        </template>
        <span slot="state" slot-scope="text, record">
          <a-tag :color="onColor(text)">
            {{ OnStatue(text) }}
          </a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
          
          <a-button type="link" @click="goDetails(record)"> 详情 </a-button>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多<a-icon type="down" /></a>
            <a-menu slot="overlay">
              <!-- <a-menu-item> 编辑 </a-menu-item> -->
              <!-- <a-menu-item v-if="record.state * 1 == 0"> 审核 </a-menu-item> -->
              <a-menu-item @click="handleExport(record)">导出</a-menu-item>
              <a-menu-item @click="seeTrack(record)"> 轨迹 </a-menu-item>
              <a-menu-item v-if="record.state * 1 != 4" @click="goGrounding(record)"> 上架 </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => delOrder(record)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
    <modal-order-track ref="orderTrack" />
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { orderDelById, queryInOrderTrack } from '@/api/order.js'
import { mapState, mapGetters } from 'vuex'
import { stateObjToArray } from '@/utils/common.js'
import ModalOrderTrack from './components/modal-order-track.vue'
import axios from 'axios'
import { Form } from 'ant-design-vue'
export default {
  data() {
    return {
      columns: [
        {
          title: '单据编号',
          align: 'center',
          dataIndex: 'orderNo',
        },
        {
          title: '来源',
          align: 'center',
          dataIndex: 'company',
        },
        // {
        //   title: '含税价格',
        //   align: 'center',
        //   dataIndex: 'includingTaxMoney',
        // },
        {
          title: '订单状态',
          align: 'center',
          scopedSlots: { customRender: 'state' },
        },
        {
          title: '所属仓库',
          align: 'center',
          scopedSlots: { customRender: 'warehourse' },
        },
        {
          title: '创建人',
          align: 'center',
          dataIndex: 'createBy',
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '更新人',
          align: 'center',
          dataIndex: 'updateBy',
        },
        {
          title: '更新时间',
          align: 'center',
          dataIndex: 'updateTime',
        },
        {
          title: '操作',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/wms/wmsInOrder/list',
        exportXlsUrl: 'wms/wmsInOrder/exportXls',
      },
      searchText: undefined,
      disableMixinCreated: true
    }
  },
  components: { ModalOrderTrack },
  mixins: [JeecgListMixin],
  computed: {
    ...mapGetters(['userInfo']),
    ...mapState({
      inOrderStates: (s) => s.order.inOrderStates,
      stateOptions: (s) => {
        return stateObjToArray(s.order.inOrderStates)
      },
      warehouseOptions: (s) => {
        return stateObjToArray(s.dictionary.enableWarehouse)
      },
      enableWarehouse: (s) => s.dictionary.enableWarehouse,
    }),
  },
  mounted() {
    this.$set(this.queryParam, 'warehourse', this.userInfo.currWarehouse)
    this.searchQuery()
  },
  methods: {
    handleExport(e) {
      // console.log('handleExport', e)
      this.handleExportXls('inorder_' + e.checkNo, { id: e.id, field: '' })
    },


    async downFile() {
      try {
        const data = new FormData();
        data.append('deviceRecordKey', 'C98482EC9F4BFD8C6B787F44FC07F173');
        data.append('type', '2');
        const r = await axios.create({})({
          url: '/udinmpagov/toDown.html',
          method: 'POST',
          responseType: 'blob',
          data
        })
        console.log('下载内容', r)
      } catch (_) {
        console.log('下载内容err', _)
      }
    },
    async seeTrack(e) {
      try {
        const params = { orderNo: e.orderNo }
        const r = await queryInOrderTrack(params)
        this.$refs.orderTrack.open({
          items: r.result.map((e) => {
            return {
              time: e.createTime,
              operator: e.createBy,
              content: e.content,
            }
          }),
        })
      } catch (_) {}
    },
    searchReset() {
      this.$set(this.queryParam, 'orderNo', undefined)
      this.$set(this.queryParam, 'state', undefined)
      this.$set(this.queryParam, 'createBy', undefined)
      this.$set(this.queryParam, 'createTime', undefined)
      this.$set(this.queryParam, 'warehourse', undefined)
    },
    handleWarehourse(e) {
      const row = this.enableWarehouse[e.warehourse]
      if (row) {
        return row.text
      } else {
        return ''
      }
    },
    addOrder() {
      this.$router.push({
        path: '/in-warehouse-order-add',
      })
    },
    async delOrder(e) {
      try {
        const params = { id: e.id }
        await orderDelById(params)
        this.$message.success('操作成功!')
        this.searchQuery()
      } catch (_) {}
    },
    goGrounding(e) {
      this.$router.push({
        path: '/in-warehouse-grounding',
        query: { id: e.id },
      })
    },
    // inputChange() {
    //   console.log('inputChange', this.searchText)
    // },
    goDetails(e) {
      this.$router.push({
        path: '/in-warehouse-order-info',
        query: { id: e.id },
      })
    },
    onColor({ state }) {
      const o = this.inOrderStates[state]
      if (o) {
        return o.color
      } else {
        return ''
      }
    },
    OnStatue({ state }) {
      const o = this.inOrderStates[state]
      if (o) {
        return o.text
      } else {
        return ''
      }
    },
    // handleTableChange() {},
    // onSelectChange()
  },
}
</script>

<style lang="scss" scoped>
.search-wrap {
  margin-bottom: 24px;
}
.search-title {
  font-size: 16px;
  font-weight: 650;
  margin-bottom: 10px;
}
</style>